<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>投票</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../static/css/style.css">
<link href="../users/css/style.css" type="text/css" rel="stylesheet" />
<!--手机端-->
<link rel="stylesheet" type="text/css" href="../users/css/style.css"
	media="screen and (max-width: 960px)" />
<!--电脑端-->
<link rel="stylesheet" type="text/css" href="../users/css/style_PC.css"
	media="screen and (min-width: 960px)" />
<link rel="icon" href="/vote/admin/t_logo.ico" type="img/x-ico" />
</head>
<body>
	<div class="title">
		<span id="nowtime"></span>&nbsp;&nbsp;&nbsp;欢迎<span id="uname"></span>！
	</div>
<!-- 	<div> -->
<!-- 		<span class="c-title">武林大会</span> -->
<!-- 		<div class="content"> -->
<!-- 			<span class="c-title">pk1</span> -->
<!-- 			<p class="c-time">2019-06-15</p> -->

<!-- 			<img class="c-pic" name="playerImage" -->
<!-- 				src="/images/20190624021557psb1.jpg"> -->
<!-- 			<div class="c-info"> -->
<!-- 				<p name="playerNo">号选手</p> -->
<!-- 				<p name="playerName">xxx</p> -->
<!-- 			</div> -->
<!-- 			<a class="c-button" href="list.html">为Ta投票</a> <img class="c-pic" -->
<!-- 				src="/images/20190624021557psb1.jpg"> -->
<!-- 			<div class="c-info"> -->
<!-- 				<p name="playerNo">号选手</p> -->
<!-- 				<p name="playerName">xxx</p> -->
<!-- 			</div> -->
<!-- 			<a class="c-button" href="list.html">为Ta投票</a> -->
<!-- 		</div> -->
<!-- 	</div> -->

	<script src="../layui/layui.js"></script>
	<script type="text/javascript">
		window.onload = function() {
			//每1秒刷新时间
			setInterval("NowTime()", 1000);
		}
		function NowTime() {
			//获取年月日
			var time = new Date();
			var year = time.getFullYear();
			var month = time.getMonth() + 1;
			var day = time.getDate();

			//获取时分秒
			var h = time.getHours();
			var m = time.getMinutes();
			var s = time.getSeconds();

			//检查是否小于10
			h = check(h);
			m = check(m);
			s = check(s);
			document.getElementById("nowtime").innerHTML = year + "年" + month
					+ "月" + day + "日" + h + ":" + m + ":" + s;
		}
		//时间数字小于10，则在之前加个“0”补位。
		function check(i) {
			//方法一，用三元运算符
			var num;
			i < 10 ? num = "0" + i : num = i;
			return num;
		}
	</script>
	
	<script type="text/javascript">
		layui.use([ 'element', 'table', 'form', 'layer', 'jquery', 'laytpl' ],
				function(element, table, form, layer, $, laytpl) {

					var userinfo = localStorage.getItem("userinfo");
					var $userinfo = JSON.parse(userinfo);
					$("#uname").html($userinfo.account);//登录用户
					userid=$userinfo.userid
					var matchs = ${result};//后台返回的数据 model
					//第三步：渲染模版
					var data = { //数据
 					  "userid": $userinfo.userid,
					  "list":matchs
					}
					var getTpl = demo.innerHTML
					,view = document.getElementById('view');
					laytpl(getTpl).render(data, function(html){
					  view.innerHTML = html;
					});
					
					//用户投票
					$(".c-button").on("click",function(){
						$.post($(this).attr('act'),
						          function(data){
						          if(data == 1){//投票成功  
						        	  $.get("/vote/uservote/result");
						        	  layer.msg("投票成功");
						          }else if(data == 0){//投票失败
						        	  layer.msg("投票失败");
						          }else{
						        	  layer.msg("您已投过本轮");
						          }
						          }, "json");
				    });
				});
	</script>
	
<!-- 第一步：编写模版。你可以使用一个script标签存放模板，如： -->
<script id="demo" type="text/html">
  <div>
  {{#  layui.each(d.list, function(index, item){ }}
    <div>
      <span class="c-title">比赛名：{{ item.matchname }}</span>
		{{#  layui.each(item.matchpkinfo, function(index, pk){ }}
		<div class="content">
			<span class="c-title">对战：{{ pk.battleid }}</span>
			<p class="c-time">{{ item.matchname }}</p>

			<img class="c-pic" name="playerImage"
				src="/images/{{ pk.players.playerimage }}">
			<div class="c-info">
				<p name="playerNo">选手：{{ pk.players.playername }}</p>
				<p name="playerName">作品：{{ pk.firstsongname }}</p>
			</div>
			<a class="c-button" href="javascript:void(0)" act="/vote/uservote/addvote?matchid={{ item.matchid }}&battleid={{ pk.battleid }}&playerid={{ pk.players.playerid }}&userid={{ userid }}">为Ta投票</a> 

			<img class="c-pic"
				src="/images/{{ pk.playerstwo.playerimage }}">
			<div class="c-info">
				<p name="playerNo">选手：{{ pk.playerstwo.playername }}</p>
				<p name="playerName">作品：{{ pk.secondsongname }}</p>
			</div>
			<a class="c-button" href="javascript:void(0)" act="/vote/uservote/addvote?matchid={{ item.matchid }}&battleid={{ pk.battleid }}&playerid={{ pk.playerstwo.playerid }}&userid={{ userid }}">为Ta投票</a>
		</div>
		{{#  }); }}
    </div>
  {{#  }); }}

  {{#  if(d.list.length === 0){ }}
    无数据
  {{#  } }} 
  <div>
</script>
 
<!-- 第二步：建立视图。用于呈现渲染结果。 -->
<div id="view"></div>

</body>
</html>